
body{
    font-size: 14px;
    font-family: "宋体";
    min-width: 320px;
    max-width: 1200px;/* 移动端可不设 */
    margin: 0 auto;/* 移动不设 */
    margin-bottom: 120px; /* Adjusted for both headers */

}
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
    color: #000;
}
a {
    text-decoration: none;
    color: #000;
}
/* 上导航 */
.wang_header {
    position: relative; /* Changed to relative to contain both headers */
    width: 100%;
}

.header3 {
    display: flex;
    justify-content: space-around;
    font-size: 22px; /* Slightly smaller than .header for hierarchy */
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #fff; 
    z-index: 9; /* Slightly lower z-index than .header */
}
/* 下导航 */
.wang_nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #eee;
    z-index: 8; /* Lower z-index than headers */
}
.wang_nav ul {
    display: flex;
}
.wang_nav li {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center; /* Center vertically */
}
.wang_nav svg {
    font-size: 36px;
    margin-top: 0; /* Removed margin-top as it's centered vertically now */
}
.wang_nav p {
    font-size: 14px;
    margin-left: 6px;
}


.wang_main {
display: flex;
flex-direction: column;
align-items: center;
}

.carousel-container {
margin-bottom: 0px;
}

.wang_pic {
margin-top: 1px;
}
/* 我的一左一右——我的活力*/
      h2{
        padding: 0;
        margin: 0;
    }
    .title1{
        border-top: 2px solid #aaa;
        line-height: 30px;
        width: 100%;
    }
    .title1 h2{
        font-style: 14px;
        color: #000;
        padding-left: 12px;
    }
    .title1 a{
        position: absolute;
        right: 8px;
        text-decoration: none;
        font-size: 18px;
        color: #aaa;
        line-height: 0;
    }
    /* 我的上图下文——观看历史*/
.container1 {
display: flex;
flex-wrap: wrap;
}
.item1 {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
text-align: center;
}
.item1 img {
width: 100px;
height: 60px; 
object-fit: contain;
}
.item1 p {
margin-top: 5px;
}
/* 左图右文 */
.title2 {
    line-height: 30px;
    border-top: 2px solid #aaa;
    width: 100%;
    position: relative; /* 添加此行 */
    padding-left: 12px; /* 将填充移动到此处，以便h2不需要单独的填充 */
}
.title2 h2 {
    font-size: 14px; /* 修改font-style为font-size */
    color: #000;
}
.title2 a {
    position: absolute;
    top: 0;
    right: 8px;
    text-decoration: none;
    font-size: 12px;
    color: #aaa;
    padding-right: 8px; /* 可选：为链接添加一些右侧填充以改善外观 */
}
.zlist {
    width: 100%; /* 根据需要调整宽度 */
    max-width: 600px; /* 可选：设置最大宽度以适应小屏幕 */
    margin: 0 auto; /* 居中列表 */
}
.zlist li {
    display: flex;
    border-bottom: 1px dotted #aaa;
    margin-bottom: 10px; /* 增加底部边距以提高可读性 */
    padding-bottom: 10px; /* 同样增加底部填充 */
    align-items: center; /* 垂直居中对齐 */
}
.zlist img {
    width: 100px;
    height: auto; /* 保持图片比例 */
}
.ztxt {
    margin-left: 20px;
    flex-grow: 1;
}
.ztxt h2 {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 5px; /* 调整底部边距 */
}
.ztxt div {
    display: flex;
    justify-content: space-between; /* 在内容之间添加空间 */
    line-height: 22px;
    font-size: 12px;
    color: #aaa;
}
.neirong {
    flex-grow: 1;
}
.qianwang span {
    /* 为“前往”按钮添加样式 */
    background-color:red;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer; /* 添加鼠标悬停效果 */
    /* 按钮样式为圆边 */
    border-radius: 35%; /* 使按钮成为圆形 */
    /* 按钮向上移 */
    margin-top: -10px; /* 向上移动按钮 */
}
/* 会员卡 */
.wang_container {
    background-color: #f3f3c6; /* 设置背景颜色 */
    padding: 50px; /* 添加内边距 */
    border-radius: 8px; /* 添加圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加盒子阴影 */
    max-width: 100%; /* 设置最大宽度 */
    margin: 0 auto; /* 居中 */
    margin-top: -40px; /* 向上移动容器 */
    max-width: 450px; /* 可根据需要调整最大宽度 */
}
.zlist1 {
    width: 100%;
    margin-bottom: 10px; /* 添加底部间距以分隔内容 */
}
.zlist1 li {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* 增加列表项之间的间距 */
}
.zlist1 img {
    width: 100px;
    height: auto;
    margin-right: 20px; /* 添加图片和文本之间的间距 */
}
.ztxt1 {
    flex-grow: 1;
}
.ztxt1 h2 {
    font-size: 18px; /* 调整标题字体大小 */
    color: #333;
    margin-bottom: 5px;
}
.ztxt1 div {
    font-size: 14px; /* 调整描述文本字体大小 */
    color: #666; /* 调整描述文本颜色 */
}
.text-container, .text-container1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* 调整间距 */
}
.text-container {
    font-size: 20px; /* 调整字体大小 */
    color: #000;
    margin-top: 0; /* 移除顶部间距 */
}
.text-container1 {
    font-size: 14px; /* 调整字体大小 */
    color: #666; /* 调整颜色 */
    margin-top: 10px; /* 添加顶部间距以分隔内容 */
}
.extra-text {
    font-size: 12px; 
    color: #666; 
    margin-top: 10px; /* 添加适当的顶部间距 */
    text-align: center; /* 文本居中显示 */
    background-color: #efc932;
    /* 增加阴影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 0; /* 减小内边距来减小高度 */
}

/* 广告 */
.swiper {
  width: 100%;
  height: 100px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 用户 */
.user-info {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 450px; /* 可根据需要调整最大宽度 */
    /* 文字为一横排 */
    display: flex;
    /* 每个p之间有间距 */
    justify-content: space-between;
}